<template>
	<view>
		<!-- F1：导航搜索条 -->
		<view class="search-bar">
			<!-- 左侧后退按钮 -->
			<uni-icons class="icon" @click="back" type="back" color="#fff" size="26" />
			<!-- 右侧主体搜索框 -->
			<uni-search-bar class="input" v-model="kw" @confirm="search" placeholder="请输入商品名称关键字" cancelButton="none">
			</uni-search-bar>
		</view>
		<!-- F2：搜索结果 -->
		<uni-list>
			<uni-list-item v-for="(p,i) in pager.data" :key="p.lid" :title="p.title" ellipsis="1"
				:thumb="$url.base + p.pic" thumbSize="base" :to="`../product-details/product-details?pid=${p.lid}`"
				link="navigateTo">
			</uni-list-item>
		</uni-list>
		<!-- F3：搜索建议 -->
		<uni-card title="热门搜索" is-full>
			<view class="suggest-list">
				<uni-tag @click="tagSearch(s.name)" class="suggest-item" v-for="(s,i) in suggestList" :key="i" :text="s.name" :type="s.type" circle
					size="small" />
			</view>
		</uni-card>
		<!-- F4：返回顶部 -->
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw: '',
				pager: {}, // 服务器端返回的分页器对象
				// 服务器端返回如下数据
				// suggestList: ['神舟', 'Apple', '轻薄', '小米', '办公', '联想', '工作站', 'T4100', '华硕', 'MacBook', '雷神Z1000', '游戏本','Thinkpad'],
				// 客户端将服务器端数据进行修改
				suggestList: [
					{name:'神舟',type:'success'}, 
					{name:'Apple',type:'warning'}, 
					{name:'轻薄',type:'error'}, 
					{name:'小米',type:'primary'}, 
					{name:'办公',type:'success'}, 
					{name:'联想',type:'warning'}, 
					{name:'工作站',type:'error'}, 
					{name:'T4100',type:'primary'}, 
					{name:'华硕',type:'success'}, 
					{name:'MacBook',type:'warning'}, 
					{name:'雷神Z1000',type:'error'}, 
					{name:'游戏本',type:'primary'},
					{name:'Thinkpad',type:'success'},
				],
			};
		},
		methods: {
			search() {
				let kw = this.kw.trim() // 裁剪前后的空白字符
				console.log(kw)
				if (kw === '') {
					uni.showToast({
						title: '关键字不能为空',
						icon: "error"
					})
					return
				}
				let url = this.$url.productList
				uni.showLoading({
					title: '商品搜索中...'
				})
				uni.request({
					url,
					// data:'kw='+kw,
					data: {
						kw
					},
					success: res => {
						// console.log(res.data)
						this.pager = res.data
					},
					fail: err => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}

				})
			},
			back() {
				// 导航返回
				uni.navigateBack()
			},
			// 标签搜索
			tagSearch(name){
				// 把标签文字放入输入框
				this.kw=name
				// 开始搜索
				this.search()
			},
		}
	}
</script>

<style lang="scss">
	.search-bar {
		display: flex;
		background-color: $xz-theme;
		align-items: center;


		.icon {}

		.input {
			flex: 1;
		}
	}

	.suggest-list {
		display: flex;
		flex-wrap: wrap;

		.suggest-item {
			margin: $uni-spacing-col-sm - 2 $uni-spacing-row-sm;
		}
	}
</style>
